<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>材料申领 - 消防工程集团</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        body {
            background: #f5f5f5;
            padding-bottom: 20px;
        }
        .item-card {
            position: relative;
        }
    </style>
</head>
<body>
    <!-- Header -->
    <div class="bg-gradient-to-r from-blue-600 to-blue-700 text-white px-4 py-4 flex items-center">
        <a href="home.html" class="mr-3">
            <i class="fas fa-arrow-left text-xl"></i>
        </a>
        <h1 class="text-lg font-semibold">材料申领</h1>
    </div>

    <!-- Items List -->
    <div id="itemsContainer" class="mx-4 mt-4 space-y-4">
        <!-- Item 1 (Default) -->
        <div class="item-card bg-white rounded-xl shadow-sm p-4">
            <div class="flex items-center justify-between mb-4">
                <div class="text-gray-700 font-semibold flex items-center">
                    <i class="fas fa-box text-blue-500 mr-2"></i>
                    物品 1
                </div>
                <button onclick="removeItem(this)" class="text-red-500 text-sm">
                    <i class="fas fa-trash-alt mr-1"></i>删除
                </button>
            </div>
            <div class="space-y-3">
                <!-- Material Name -->
                <div>
                    <label class="block text-xs font-semibold text-gray-600 mb-1">
                        材料名称 <span class="text-red-500">*</span>
                    </label>
                    <input type="text" placeholder="请输入材料名称" 
                           class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm text-gray-800 focus:outline-none focus:ring-2 focus:ring-blue-500">
                </div>

                <!-- Specification -->
                <div>
                    <label class="block text-xs font-semibold text-gray-600 mb-1">
                        规格型号 <span class="text-red-500">*</span>
                    </label>
                    <input type="text" placeholder="请输入规格型号" 
                           class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm text-gray-800 focus:outline-none focus:ring-2 focus:ring-blue-500">
                </div>

                <!-- Quantity and Unit -->
                <div class="grid grid-cols-2 gap-3">
                    <div>
                        <label class="block text-xs font-semibold text-gray-600 mb-1">
                            申领数量 <span class="text-red-500">*</span>
                        </label>
                        <input type="number" placeholder="数量" 
                               class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm text-gray-800 focus:outline-none focus:ring-2 focus:ring-blue-500">
                    </div>
                    <div>
                        <label class="block text-xs font-semibold text-gray-600 mb-1">
                            单位 <span class="text-red-500">*</span>
                        </label>
                        <input type="text" placeholder="如：个、套、米" 
                               class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm text-gray-800 focus:outline-none focus:ring-2 focus:ring-blue-500">
                    </div>
                </div>

                <!-- Purpose -->
                <div>
                    <label class="block text-xs font-semibold text-gray-600 mb-1">
                        用途说明 <span class="text-red-500">*</span>
                    </label>
                    <textarea placeholder="请说明此材料的用途" rows="2" 
                              class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm text-gray-800 focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea>
                </div>
            </div>
        </div>
    </div>

    <!-- Add Item Button -->
    <div class="px-4 mt-4">
        <button onclick="addItem()" class="w-full bg-white border-2 border-dashed border-blue-300 text-blue-600 py-3 rounded-xl font-semibold text-sm hover:bg-blue-50 transition-colors">
            <i class="fas fa-plus mr-2"></i>
            添加物品
        </button>
    </div>

    <!-- Common Info -->
    <div class="bg-white mx-4 mt-4 rounded-xl shadow-sm p-4 mb-4">
        <div class="text-gray-700 font-semibold mb-4 flex items-center">
            <i class="fas fa-info-circle text-blue-500 mr-2"></i>
            其他信息
        </div>
        <div class="space-y-4">
            <!-- Project -->
            <div>
                <label class="block text-sm font-semibold text-gray-700 mb-2">
                    <i class="fas fa-building text-blue-500 mr-1"></i>关联项目 <span class="text-red-500">*</span>
                </label>
                <select class="w-full border border-gray-300 rounded-lg px-4 py-3 text-gray-800 focus:outline-none focus:ring-2 focus:ring-blue-500">
                    <option value="">请选择项目</option>
                    <option value="1">消防工程A项目</option>
                    <option value="2">消防工程B项目</option>
                    <option value="3">消防工程C项目</option>
                </select>
            </div>

            <!-- Expected Date -->
            <div>
                <label class="block text-sm font-semibold text-gray-700 mb-2">
                    <i class="fas fa-calendar-check text-blue-500 mr-1"></i>预计使用日期
                </label>
                <input type="date" 
                       class="w-full border border-gray-300 rounded-lg px-4 py-3 text-gray-800 focus:outline-none focus:ring-2 focus:ring-blue-500">
            </div>

            <!-- Remark -->
            <div>
                <label class="block text-sm font-semibold text-gray-700 mb-2">
                    <i class="fas fa-comment text-blue-500 mr-1"></i>备注说明
                </label>
                <textarea placeholder="请输入备注信息" rows="2" 
                          class="w-full border border-gray-300 rounded-lg px-4 py-3 text-gray-800 focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea>
            </div>
        </div>
    </div>

    <!-- Submit Button -->
    <div class="px-4 mb-6">
        <button onclick="submitForm()" class="w-full bg-gradient-to-r from-blue-600 to-blue-700 text-white py-4 rounded-xl font-semibold text-lg shadow-lg active:scale-95 transition-transform">
            <i class="fas fa-paper-plane mr-2"></i>
            提交申请
        </button>
    </div>

    <script>
        let itemCount = 1;

        function addItem() {
            itemCount++;
            const container = document.getElementById('itemsContainer');
            const newItem = document.createElement('div');
            newItem.className = 'item-card bg-white rounded-xl shadow-sm p-4';
            newItem.innerHTML = `
                <div class="flex items-center justify-between mb-4">
                    <div class="text-gray-700 font-semibold flex items-center">
                        <i class="fas fa-box text-blue-500 mr-2"></i>
                        物品 ${itemCount}
                    </div>
                    <button onclick="removeItem(this)" class="text-red-500 text-sm">
                        <i class="fas fa-trash-alt mr-1"></i>删除
                    </button>
                </div>
                <div class="space-y-3">
                    <div>
                        <label class="block text-xs font-semibold text-gray-600 mb-1">
                            材料名称 <span class="text-red-500">*</span>
                        </label>
                        <input type="text" placeholder="请输入材料名称" 
                               class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm text-gray-800 focus:outline-none focus:ring-2 focus:ring-blue-500">
                    </div>
                    <div>
                        <label class="block text-xs font-semibold text-gray-600 mb-1">
                            规格型号 <span class="text-red-500">*</span>
                        </label>
                        <input type="text" placeholder="请输入规格型号" 
                               class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm text-gray-800 focus:outline-none focus:ring-2 focus:ring-blue-500">
                    </div>
                    <div class="grid grid-cols-2 gap-3">
                        <div>
                            <label class="block text-xs font-semibold text-gray-600 mb-1">
                                申领数量 <span class="text-red-500">*</span>
                            </label>
                            <input type="number" placeholder="数量" 
                                   class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm text-gray-800 focus:outline-none focus:ring-2 focus:ring-blue-500">
                        </div>
                        <div>
                            <label class="block text-xs font-semibold text-gray-600 mb-1">
                                单位 <span class="text-red-500">*</span>
                            </label>
                            <input type="text" placeholder="如：个、套、米" 
                                   class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm text-gray-800 focus:outline-none focus:ring-2 focus:ring-blue-500">
                        </div>
                    </div>
                    <div>
                        <label class="block text-xs font-semibold text-gray-600 mb-1">
                            用途说明 <span class="text-red-500">*</span>
                        </label>
                        <textarea placeholder="请说明此材料的用途" rows="2" 
                                  class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm text-gray-800 focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea>
                    </div>
                </div>
            `;
            container.appendChild(newItem);
        }

        function removeItem(button) {
            const container = document.getElementById('itemsContainer');
            if (container.children.length <= 1) {
                alert('至少需要保留一个物品');
                return;
            }
            button.closest('.item-card').remove();
            updateItemNumbers();
        }

        function updateItemNumbers() {
            const items = document.querySelectorAll('.item-card');
            items.forEach((item, index) => {
                const title = item.querySelector('.text-gray-700.font-semibold');
                title.innerHTML = `<i class="fas fa-box text-blue-500 mr-2"></i>物品 ${index + 1}`;
            });
        }

        function submitForm() {
            // Validate items
            const items = document.querySelectorAll('.item-card');
            let isValid = true;
            let errorMsg = '';

            items.forEach((item, index) => {
                const inputs = item.querySelectorAll('input[type="text"], input[type="number"], textarea');
                inputs.forEach(input => {
                    if (input.hasAttribute('required') || input.previousElementSibling && input.previousElementSibling.textContent.includes('*')) {
                        if (!input.value.trim()) {
                            isValid = false;
                            const label = input.previousElementSibling ? input.previousElementSibling.textContent.trim() : '字段';
                            errorMsg = `请填写物品${index + 1}的${label}`;
                        }
                    }
                });
            });

            if (!isValid) {
                alert(errorMsg);
                return;
            }

            // Check project selection
            const projectSelect = document.querySelector('select');
            if (!projectSelect.value) {
                alert('请选择关联项目');
                return;
            }

            // Submit logic here
            alert('材料申领申请提交成功！');
            // window.location.href = 'home.html';
        }
    </script>
</body>
</html>
